<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Guide</title>
    #required_css
    <link rel="stylesheet" href="$!basePath/app/docs.css">
    <style>
        ul{
            list-style: none;
        }

        ul>li{
            padding: 5px;
            margin: 5px;
            border-radius: 3px;
            text-align: center;
            width: 200px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container bs-docs-container">
    <div class="row">
        <div class="col-md-12" role="main">
            <div class="bs-docs-section">
                <h1 class="page-header">颜色</h1>
                <p class="lead">在不同情境下使用不同的颜色来体现</p>

                <h2>背景颜色</h2>
                <div class="bs-example">
                    <ul>
                        <li class="bg-primary">bg-primary</li>
                        <li class="bg-success">bg-success</li>
                        <li class="bg-info">bg-info</li>
                        <li class="bg-warning">bg-warning</li>
                        <li class="bg-danger">bg-danger</li>
                        <li class="bg-default">bg-default</li>
                    </ul>
                </div>
                <figure class="highlight">
                    <pre class="brush: html">
                        &lt;ul&gt;
                            &lt;li class="bg-primary"&gt;bg-primary&lt;/li&gt;
                            &lt;li class="bg-success"&gt;bg-success&lt;/li&gt;
                            &lt;li class="bg-info"&gt;bg-info&lt;/li&gt;
                            &lt;li class="bg-warning"&gt;bg-warning&lt;/li&gt;
                            &lt;li class="bg-danger"&gt;bg-danger&lt;/li&gt;
                            &lt;li class="bg-default"&gt;bg-default&lt;/li&gt;
                        &lt;/ul&gt;
                    </pre>
                </figure>

                <h2>文本颜色</h2>
                <div class="bs-example">
                    <ul>
                        <li class="text-primary">text-primary</li>
                        <li class="text-success">text-success</li>
                        <li class="text-info">text-info</li>
                        <li class="text-warning">text-warning</li>
                        <li class="text-danger">text-danger</li>
                        <li class="text-muted">text-muted</li>
                    </ul>
                </div>
                <figure class="highlight">
                    <pre class="brush: html">
                        &lt;ul&gt;
                            &lt;li class="text-primary"&gt;text-primary&lt;/li&gt;
                            &lt;li class="text-success"&gt;text-success&lt;/li&gt;
                            &lt;li class="text-info"&gt;text-info&lt;/li&gt;
                            &lt;li class="text-warning"&gt;text-warning&lt;/li&gt;
                            &lt;li class="text-danger"&gt;text-danger&lt;/li&gt;
                            &lt;li class="text-muted"&gt;text-muted&lt;/li&gt;
                        &lt;/ul&gt;
                    </pre>
                </figure>
            </div>
        </div>
    </div>
</div>
</body>
#required_js
<script type="text/javascript" src="$!basePath/app/docs.js"></script>
</html>